<template>
  <div>
    <div style="height: 34px;">
      <span style=" display:inline-block;font-weight: bold;font-size: 13px;padding:8px 0 0 5px;">数据开发</span>
      <div style="height: 34px; display: flex;align-items: center; float: right;margin-right: 5px;">
        <!--              <span style="margin-right: 4px ">-->
        <!--              <svg-icon -->
        <!--              style="font-size: 19px;"-->
        <!--              icon-class="refresh"/>-->
        <!--            </span>-->
        <!--             <span style="margin-right: 5px ">-->
        <!--              <svg-icon -->
        <!--              style="font-size: 18px;"-->
        <!--              icon-class="position" />-->
        <!--            </span>-->
        <!--              <span style="margin-right: 5px ">-->
        <!--                <svg-icon-->
        <!--                 icon-class="table" />-->
        <!--              </span>-->
        <!--              <span style="margin-right: 5px "> -->
        <!--                <svg-icon-->
        <!--                  icon-class="import" />-->
        <!--               </span>-->
        <span style="margin-right: 5px"><el-button size="mini" @click="changeFlow()" type="primary">
               切换
              <svg-icon style="" icon-class="swap" />
            </el-button></span>
        <span style="margin-right: 5px"><el-button size="mini" @click="editFlowDialog()" type="primary">
               修改
              <svg-icon style="" icon-class="edit" />
            </el-button></span>
        <span style="margin-right: 5px"><el-button size="mini" @click="deleteFlow()" type="primary">
               删除
              <svg-icon style="" icon-class="delete" />
            </el-button></span>
        <el-dropdown size="mini" trigger="click" @command="addProcess">
          <el-button size="mini" type="primary">
            新建
            <svg-icon style="" icon-class="chevron-down" />
          </el-button>
          <el-dropdown-menu>
            <el-dropdown-item command="menu">新建目录</el-dropdown-item>
            <el-dropdown-item command="flow">新建流程</el-dropdown-item>
            <el-dropdown-item command="zhuti">新建主题</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </div>
      <el-divider></el-divider>
    </div>
    <el-dialog width="30%" :title="title" :visible.sync="addProcessVisible">
      <el-form :model="addProcessform">
        <el-form-item label="名称：" label-width="100px">
          <el-input style="width:90%" placeholder="请输入名称" size="mini" v-model="addProcessform.processname"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="closedialog()">取 消</el-button>
        <el-button size="mini" type="primary" @click="addProcessSure()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog width="30%" title="切换主题" :visible.sync="changeProcessVisible">
      <el-form :model="changeProcessform">
        <el-form-item label="主题：" label-width="100px">
          <el-select filterable style="width: 90%" size="mini" v-model="changeProcessform.zhutId"
                     placeholder="请选择主题">
            <el-option
              v-for="item in zhutiOption"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="changeProcessVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="changeProcessSure()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Print from "@/util/print";
import axios from "axios";
import ElOption from "@/components/select/src/option.vue";

export default {
  components: { ElOption },
  props: ["clickTreeNode"],
  name: "demo1",
  data() {
    return {
      value1: "全部",
      value2: "",
      title: "",
      defaultProps: {
        children: "children",
        label: "label"
      },
      addProcessVisible: false,
      changeProcessVisible: false,
      addProcessform: {
        processname: ""
      },
      zhutiOption: [],
      changeProcessform: {
        zhutId: ""
      }

    };
  },
  methods: {
    closedialog() {
      this.addProcessVisible = false;
      this.$bus.$emit("clearTreeData");
      // this.clickTreeNode.id = ""
    },
    addProcess(command) {
      if (!this.clickTreeNode && command !== "zhuti") {
        return this.$message.warning("请选择目录/流程");
      }
      if (command === "menu") {
        this.title = "新建目录";
      } else if (command === "zhuti") {
        this.title = "新建主题";
      } else {
        this.title = "新建流程";
      }
      this.addProcessform.processname = "";
      this.addProcessVisible = true;
    },
    //新增流程
    addProcessSure() {
      if (this.title === "新建目录") {
        let data = {
          parentId: this.clickTreeNode.id || -1,
          name: this.addProcessform.processname
        };
        this.$http.post("/flowMenu/addFlowMenu", data).then((data) => {
          if (data.code === "200") {
            this.$message.success("新增成功");
          } else {
            this.$message({
              showClose: true,
              type: "error",
              message: "新增失败"
            });
            // this.$message.error("新增失败");
          }
        }).finally(() => {
          this.addProcessform.processname = "";
          this.$bus.$emit("getTreeData");
          this.addProcessVisible = false;
          this.$bus.$emit("clearTreeData");
        });
      } else if (this.title === "新建主题") {
        let data = {
          name: this.addProcessform.processname
        };
        this.$http.post("/flowMenu/addSubject", data).then((data) => {
          if (data.code === "200") {
            this.$message.success("新增成功");
          } else {
            this.$message({
              showClose: true,
              type: "error",
              message: "新增失败"
            });
            // this.$message.error("新增失败");
          }
        }).finally(() => {
          this.addProcessform.processname = "";
          this.$bus.$emit("getTreeData");
          this.addProcessVisible = false;
          this.$bus.$emit("clearTreeData");
        });

      } else if (this.title === "修改名称") {
        let data = {
          id: this.clickTreeNode.id,
          type: this.clickTreeNode.type,
          name: this.addProcessform.processname
        };
        this.$http.post("/flowMenu/updateFlowInfo", data).then((data) => {
          if (data.code === "200") {
            this.$message.success("修改成功");
          } else {
            this.$message({
              showClose: true,
              type: "error",
              message: "修改失败"
            });
            // this.$message.error("修改失败");
          }
        }).finally(() => {
          this.addProcessform.processname = "";
          this.$bus.$emit("getTreeData");
          //删除流程之后要移出对应的tabs
          this.$bus.$emit("removeTabs", this.clickTreeNode.name);
          this.addProcessVisible = false;
          this.$bus.$emit("clearTreeData");
        });
      } else {
        let data = {
          flowMenuId: this.clickTreeNode.id,
          name: this.addProcessform.processname
        };
        this.$http.post("/flowMenu/addFlowInfo", data).then((data) => {
          if (data.code === "200") {
            this.$message.success("新增成功");
          } else {
            this.$message({
              showClose: true,
              type: "error",
              message: "新增失败"
            });
            // this.$message.error("新增失败");
          }
        }).finally(() => {
          this.addProcessform.processname = "";
          this.$bus.$emit("getTreeData");
          this.addProcessVisible = false;
          this.$bus.$emit("clearTreeData");
        });
      }

    },
    editFlowDialog() {
      if (!this.clickTreeNode) {
        return this.$message.warning("请选择目录/流程");
      }
      this.title = "修改名称";
      this.addProcessform.processname = this.clickTreeNode.name;
      this.addProcessVisible = true;
    },
    changeFlow() {
      this.getzhuti();
      this.changeProcessVisible = true;
    },
    changeProcessSure() {
      this.$http.post("/flowMenu/switchSubject", { id: this.changeProcessform.zhutId }).then((res) => {
        if (res.code === "200") {
          this.$message.success("切换成功");
        }
      }).finally(() => {
        this.addProcessform.zhutId = "";
        this.$bus.$emit("getTreeData");
        this.$bus.$emit("removeTabs", "");
        this.changeProcessVisible = false;
      });
    },
    getmoren() {
      this.$http.post("/flowMenu/getFlowMenu", {}).then((data) => {
        this.changeProcessform.zhutId = data.data[0].id;
      });
    },


    // 删除流程
    deleteFlow() {
      // console.log(this.clickTreeNode)
      if (!this.clickTreeNode) {
        return this.$message.warning("请选择目录/流程");
      }
      this.$confirm(`是否删除${this.clickTreeNode.name}？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let data = {
          id: this.clickTreeNode.id,
          type: this.clickTreeNode.type
        };
        this.$http.post("/flowMenu/deleteFlowInfo", data).then((data) => {
          if (data.code === "200") {
            this.$message.success("删除成功");
          } else {
            this.$message({
              showClose: true,
              type: "error",
              message: "删除失败"
            });
            // this.$message.error("删除失败");
          }
        }).finally(() => {
          this.$bus.$emit("getTreeData");
          //删除流程之后要移出对应的tabs
          this.$bus.$emit("removeTabs", this.clickTreeNode.name);
          this.$bus.$emit("clearTreeData");
        });
      }).catch(() => {
        this.$bus.$emit("clearTreeData");
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
    },
    getzhuti() {
      this.$http.post("/sysUser/findSubject").then((res) => {
        this.zhutiOption = res.data;
      }).finally(()=>{
        this.getmoren()
      });
    }

  },
  computed: {
    documentHeight() {
      return this.$store.getters.documentHeight;
    },
    lastHeight() {
      return this.documentHeight - 130;
    }
  },
  created() {

  },
  mounted() {

  }
};
</script>

<style scoped>
</style>
  